<template>
  <div v-loading="isLoading">
    <div class="weather_container">
      <div class="BAC-title" style="height: 68px; font-size: 24px">
        水上桥区管控专题
      </div>
      <div class="content-container">
        <div class="content">
          <div class="title">通航情况</div>
          <div id="lineChart1" class="echarts"></div>
          <div class="lineChart1Value">{{ seriesData1[0] || "--" }}</div>
        </div>
        <div class="content">
          <div class="title">各观察点船型统计</div>
          <div id="lineChart2" class="echarts"></div>
          <div class="situation-list">
            <div
              class="list-item"
              v-for="(item, index) in echartlist"
              :key="index"
            >
              <div class="item-title">
                <span
                  class="dot"
                  :style="'background-color:' + item.color"
                ></span
                >{{ item.name }}
              </div>
              <div class="item-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">各观察点月船舶流量分析</div>
          <div id="lineChart3" class="echarts"></div>
        </div>
        <div class="content">
          <div class="title">各观察点月船舶吨位统计</div>
          <div id="lineChart4" class="echarts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
  TitleComponent,
} from "echarts/components";
import { LineChart, BarChart, PieChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
  TitleComponent,
  DataZoomComponent,
]);
import { useRouter } from "vue-router";
const router = useRouter();
// 引入api
import { hdCbllDetail } from "../../../utils/bridgeAreaControlApi";

const isLoading = ref(false);
const echartlist = ref([
  {
    value: 0,
    name: "3000吨以上船舶",
    color: "#6B9BFD",
  },
  {
    value: 0,
    name: "3000吨以下船舶",
    color: "#4ED9A0",
  },
]);
const waterway = ref("");
const xAxisData1 = ref([]);
const xAxisData2 = ref(0);
const xAxisData3 = ref([]);
const xAxisData4 = ref([]);
const seriesData1 = ref([]);
const seriesData2 = ref(0);
const seriesData3 = ref([]);
const seriesData4 = ref([]);
const weatherStatFunction = () => {
  isLoading.value = true;
  hdCbllDetail({ waterway: waterway.value })
    .then((res) => {
      let data = res.data;
      xAxisData1.value = [];
      seriesData1.value = [];
      xAxisData2.value = 0;
      seriesData2.value = 0;
      xAxisData3.value = [];
      seriesData3.value = [];
      xAxisData4.value = [];
      seriesData4.value = [];
      if (res.code === 200) {
        xAxisData1.value = [data.bzRate];
        seriesData1.value = [data.thDetail];
        data.cbll?.forEach((item1) => {
          xAxisData1.value.push(item1.ny);
          seriesData1.value.push(item1.temperature);
          xAxisData2.value += item1.dayu;
          seriesData2.value += item1.xiaoyu;
          xAxisData3.value.push(item1.gcdMc);
          seriesData3.value.push(item1.shipNum);
          xAxisData4.value.push(item1.gcdMc);
          seriesData4.value.push(item1.totalDw);
        });
      }
      nextTick(() => {
        initLineChart1();
        initLineChart2();
        initLineChart3();
        initLineChart4();
      });
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const initLineChart1 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart1")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart1"));

  let option;
  let echartlist = [
    {
      value: 100 - xAxisData1.value[0],
      color: "#f1f3f4",
    },
    {
      value: xAxisData1.value[0],
      color: "#6B9BFD",
    },
  ];
  let color = [
    [
      { offset: 0, color: "#f1f3f4" },
      { offset: 1, color: "#f1f3f4" },
    ],
    [
      { offset: 0, color: "#6B9BFD" },
      { offset: 1, color: "#6B9BFD" },
    ],
  ];
  echartlist.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
    };
  });
  option = {
    color,
    title: {
      text: "通航保障率",
      subtext: xAxisData1.value[0] + "%" || "0",
      textStyle: {
        color: "#595959",
        fontSize: 12,
        align: "center",
      },
      subtextStyle: {
        fontSize: 21,
        color: "#165DFF",
      },
      x: "center",
      y: "40%",
    },

    tooltip: {
      trigger: "item",
      show: false,
    },
    series: [
      {
        type: "pie",
        minAngle: 5,
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: false,
        },
        center: ["50%", "50%"],
        radius: ["55%", "90%"],
        data: echartlist,
      },
    ],
  };
  option && lineChart.setOption(option);
};
const initLineChart2 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart2")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart2"));

  let option;
  echartlist.value = [
    {
      value: xAxisData2.value,
      name: "3000吨以上船舶",
      color: "#6B9BFD",
    },
    {
      value: seriesData2.value,
      name: "3000吨以下船舶",
      color: "#4ED9A0",
    },
  ];
  let color = [
    [
      { offset: 0, color: "#6B9BFD" },
      { offset: 1, color: "#6B9BFD" },
    ],
    [
      { offset: 0, color: "#4ED9A0" },
      { offset: 1, color: "#4ED9A0" },
    ],
  ];
  echartlist.value.forEach((item, index) => {
    item.itemStyle = {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color[index]),
    };
  });
  option = {
    color,
    // title: {
    //   text: "总数",
    //   subtext: xrdata.totalShip || "0",
    //   textStyle: {
    //     color: "#595959",
    //     fontSize: 12,
    //     align: "center",
    //   },
    //   subtextStyle: {
    //     fontSize: 21,
    //     color: "#165DFF",
    //   },
    //   x: "center",
    //   y: "40%",
    // },

    tooltip: {
      trigger: "item",
      show: true,
    },
    series: [
      {
        type: "pie",
        minAngle: 5,
        startAngle: 10, //起始角度
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          show: false,
        },
        center: ["50%", "50%"],
        radius: ["55%", "90%"],
        data: echartlist.value,
      },
    ],
  };
  option && lineChart.setOption(option);
};
const initLineChart3 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart3")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart3"));

  let option;
  if(xAxisData3.value.length === 0){
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          color: "#8c8c8c",
          fontSize: 12,
          fontWeight: 500
        }
      }
    };
  }else{
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      axisPointer: {
        type: "shadow",
      },
      legend: {
        itemWidth: 6, // 设置图例项的宽度
        itemHeight: 6, // 设置图例项的高度
        textStyle: {
          fontSize: "12px",
          color: "rgba(0,0,0,0.85)",
        },
        itemGap: 4,
        icon: "circle", //图例设置成圆形
      },
      grid: {
        top: "60px",
        left: "45px",
        right: "40px",
        bottom: "55px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 12,
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data: xAxisData3.value,
        // name: "月份",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        axisLabel: {
          interval: 0,
          // rotate: -30, //倾斜的程度
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "船舶数量",
          data: seriesData3.value,
          type: "bar",
          barWidth: 10,
          color: "#6B9BFD",
        },
      ],
    };
  }
  option && lineChart.setOption(option);
};
const initLineChart4 = () => {
  let lineChart = echarts.getInstanceByDom(
    document.getElementById("lineChart4")
  );
  if (lineChart != null && lineChart != "" && lineChart != undefined) {
    lineChart.dispose();
  }
  lineChart = echarts.init(document.getElementById("lineChart4"));

  let option;
  if(xAxisData4.value.length === 0){
    option = {
      title: {
        text: "暂无数据",
        x: "center",
        y: "center",
        textStyle: {
          color: "#8c8c8c",
          fontSize: 12,
          fontWeight: 500
        }
      }
    };
  }else{
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      axisPointer: {
        type: "shadow",
      },
      legend: {
        itemWidth: 6, // 设置图例项的宽度
        itemHeight: 6, // 设置图例项的高度
        textStyle: {
          fontSize: "12px",
          color: "rgba(0,0,0,0.85)",
        },
        itemGap: 4,
        icon: "circle", //图例设置成圆形
      },
      grid: {
        top: "60px",
        left: "70px",
        right: "40px",
        bottom: "55px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 12,
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data: xAxisData4.value,
        // name: "月份",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        axisLabel: {
          interval: 0,
          // rotate: -30, //倾斜的程度
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "船舶吨位",
          data: seriesData4.value,
          type: "bar",
          barWidth: 10,
          color: "#4ed9a0",
        },
      ],
    };
  }
  option && lineChart.setOption(option);
};

onMounted(() => {
  let routerData = router?.currentRoute?.value?.query;
  let waterwayRouter = routerData?.waterway;
  waterway.value = waterwayRouter||"";
  weatherStatFunction();
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.weather_container {
  height: 100vh;
  overflow: hidden;
  .filter {
    display: flex;
    margin: 0px 0px 16px 0px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 10;
    padding: 5px 20px;
    box-sizing: border-box;
    .selectClass {
      width: calc(50% - 5px);
    }
    .selectClass:nth-child(1) {
      margin-right: 10px;
    }
  }
  margin: 0 16px;
  .content-container {
    margin-top: 80px;
    overflow-y: scroll;
    height: calc(100vh - 80px);
  }
  .content {
    background: #ffffff;
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    .title {
      display: flex;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      font-size: 14px;
    }
    .echarts {
      height: 316px;
      margin: 0 auto;
    }
    #lineChart1,
    #lineChart2 {
      margin-top: 10px;
      width: 200px;
      height: 200px;
    }
    .lineChart1Value {
      color: #595959;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 60px;
    }
  }
}
.BAC-title {
  width: 100%;
  font-size: 24px;
  line-height: 68px;
  background: rgba(49, 118, 233, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../../../static/images/bridgeAreaControl/bg_zhuanti.png")
    no-repeat;
  background-size: cover;
}
::v-deep.van-field {
  background-color: #f8f9fb;
  border-radius: 8px;
}
.situation-list {
  padding: 0 10px 10px;
  .list-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8c8c8c;
    line-height: 30px;
    .item-title {
      .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #f7f9fc;
        margin-right: 10px;
      }
    }

    .item-value {
    }
  }
}
</style>
